<template>
  <div :id="id">
    <el-row>
      <el-table ref="sysDsConfTable"
        border
        :data="data"
        style="width: 100%"
        :tree-props="treeProps"
        :stripe="stripe"
        :row-key="rowKey"
        :highlight-current-row="showHighlightRow"
        :height="height || null"
        :indent="indent || 16"
        size="medium"
        @selection-change="handleSelectionChange"
        @select="rowSelect"
        @select-all="selectAll"
        @row-click="handleRowClick">
        <el-table-column v-if="select"
          type="selection"
          fixed="left"
          width="55"
          align="center" />
        <el-table-column v-if="index"
          label="序号"
          width="80"
          align="center">
          <template slot-scope="scope">
            <span>{{
              scope.$index + (pagination.page - 1) * pagination.size + 1
            }}</span>
          </template>
        </el-table-column>
        <template v-for="item in custom">
          <el-table-column :key="item.scopeName"
            :label="item.label"
            :width="item.width ? item.width : null"
            :show-overflow-tooltip="item.tooltip ? item.tooltip() : true"
            :align="item.align ? item.align : 'center'"
            min-width="100">
            <template slot-scope="scope">
              <slot :name="item.scopeName"
                :row="scope.row" />
            </template>
          </el-table-column>
        </template>

        <template v-for="(item, index) in config">
          <!-- self属性用于标记需要做特殊操作的一些列 -->
          <el-table-column v-if="
              item.self &&
                item.self.operation &&
                showAction(item.self.operation)
            "
            :key="index"
            :label="item.label"
            v-bind="item"
            :fixed="item.fixed === false || item.fixed ? item.fixed : 'right'"
            :align="item.align || 'center'"
            :width="`${item.self.width ? item.self.width : null}`"
            :show-overflow-tooltip="item.tooltip"
            min-width="50">
            <template slot-scope="scope">
              <template v-for="(el, index) in item.self.operation">
                <el-button v-if="!el.render && !el.ifShow"
                  :key="index"
                  :type="el.type"
                  :size="item.size || size"
                  :class="`${el.class}`"
                  :icon="el.icon"
                  @click.native.prevent="
                    el.method(scope.$index, scope.row, el.params)
                  ">{{ el.label ? el.label : scope.row[item.prop] }}</el-button>
                <el-button v-if="el.ifShow && el.ifShow(scope.row)"
                  :key="index"
                  :type="el.type"
                  :size="item.size || size"
                  :class="`${el.class}`"
                  :icon="el.icon"
                  @click.native.prevent="
                    el.method(scope.$index, scope.row, el.params)
                  ">{{ el.label ? el.label : scope.row[item.prop] }}</el-button>
                <el-button v-if="el.ifShow && !el.ifShow(scope.row) && el.ifExist"
                  :key="index"
                  :type="el.type"
                  style="visibility: hidden">{{ el.label ? el.label : scope.row[item.prop] }}
                </el-button>
              </template>
            </template>
          </el-table-column>
          <!-- handle属性用于标记需要做被编辑的一些列 -->
          <el-table-column v-if="item.handle"
            :key="index"
            :label="item.label"
            v-bind="item"
            :align="item.align ? item.align : 'center'"
            :width="`${item.width ? item.width : null}`"
            :show-overflow-tooltip="item.tooltip"
            min-width="50">
            <template slot-scope="scope">
              <!-- <v-slot :scope="scope"></v-slot> -->
              <!-- 编辑 -->
              <el-input v-if="item.type === 'Input'"
                v-model="scope.row[item.prop]"
                maxlength="64"
                :disabled="item.isDisabled ? !item.isDisabled() : false"
                :size="item.size || size"
                :placeholder="item.placeholder || ''"
                @change="item.change(scope.row, item.prop)" />
              <!-- 下拉框 -->
              <div v-if="item.type === 'Select'"
                :class="[
                  'select-dot',
                  item.color ? item.color(scope.row).class : '',
                ]" />
              <!-- 日期 -->
              <el-date-picker v-if="item.type === 'Date'"
                v-model="scope.row[item.prop]"
                :placeholder="item.placeholder"
                :value-format="item.format"
                :picker-options="item.pickerOptions(scope.row)"
                :disabled="item.isDisabled ? !item.isDisabled() : false"
                @change="item.change && item.change(scope.row, item.prop)" />
              <!-- 开关 -->
              <el-switch v-if="item.type === 'Switch'"
                v-model="scope.row[item.prop]"
                :disabled="item.isDisabled ? !item.isDisabled() : false"
                @change="item.change && item.change(scope.row, item.prop)" />
            </template>
          </el-table-column>

          <el-table-column v-if="!item.self && !item.handle"
            :key="index"
            :align="item.align ? item.align : 'center'"
            :label="item.label"
            v-bind="item"
            :width="`${item.width ? item.width : null}`"
            min-width="50"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <!-- 文本 -->
              <span v-if="item.text">
                <span>{{ item.text(scope.row) }}</span>
              </span>
              <!-- 连接 -->
              <span v-else-if="item.isLink">
                <el-link :underline="false"
                  @click="item.method(index, scope.row)">{{
                  scope.row[item.prop] ? scope.row[item.prop] : "---"
                }}</el-link>
              </span>
              <!-- 进度条 -->
              <div v-else-if="item.progress"
                style="width: 100%">
                <el-progress :percentage="
                    item.progress(scope.row).progressNum
                      ? Number(item.progress(scope.row).progressNum)
                      : 0
                  "
                  :color="
                    item.customColors ||
                      item.customColors(item.progress(scope.row).progressNum) ||
                      ''
                  " />
              </div>
              <!-- svg图标/icon图标 svgIcon -->
              <span v-else-if="item.svgIcon">
                <span>
                  <item :icon="scope.row.menuIcon" />
                </span>
              </span>
              <!-- 全输入框 -->
              <span v-else-if="item.type === 'editable'">
                <span>
                  <el-input v-if="!item.type1"
                    v-model="scope.row[item.prop]"
                    maxlength="64"
                    size="small" />
                  <el-date-picker v-if="item.type1 === 'Date'"
                    v-model="scope.row[item.prop]"
                    :placeholder="item.placeholder"
                    :value-format="item.format"
                    :picker-options="item.pickerOptions(scope.row)"
                    :disabled="item.isDisabled ? !item.isDisabled() : false"
                    @change="item.change && item.change(scope.row, item.prop)" />
                </span>
              </span>
              <!-- 最后一项的文本内容是输入框 -->
              <span v-else-if="editable && scope.$index == data.length - 1">
                <span>
                  <el-input v-if="!item.type"
                    v-model="inputList[item.prop]"
                    maxlength="64"
                    size="small" />
                  <el-date-picker v-if="item.type === 'Date'"
                    v-model="scope.row[item.prop]"
                    :placeholder="item.placeholder"
                    format="yyyy-MM-dd"
                    :picker-options="item.pickerOptions(scope.row)"
                    :disabled="item.isDisabled ? !item.isDisabled() : false"
                    @change="item.change && item.change(scope.row, item.prop)" />
                </span>
              </span>
              <!-- 无内容时显示‘---’ -->
              <span v-else>{{
                scope.row[item.prop] ? scope.row[item.prop] : "---"
              }}</span>
            </template>
          </el-table-column>
        </template>
        <!-- <template slot="empty">
          <div>
            <p class="empty-img"></p>
            <span>暂无数据！</span>
          </div>
        </template> -->
      </el-table>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'TableComp',
  props: {
    id: {
      type: String,
      default: 'table-Comp'
    },
    stripe: {
      type: Boolean,
      default: false
    },
    editable: {
      type: Boolean,
      default: false
    },
    data: Array,
    config: Array,
    select: Boolean,
    index: Boolean,
    treeProps: Object,
    rowKey: String,
    showHighlightRow: Boolean,
    custom: Array,
    height: Number,
    indent: Number,
    pagination: {
      type: Object,
      default: () => {
        return {
          page: 1,
          size: 10
        }
      }
    },
    size: {
      type: String,
      default: sessionStorage.getItem('size')
    }
  },
  data() {
    return {
      inputListArry: [],
      inputList: {}
    }
  },
  mounted() {},
  methods: {
    handleSelectionChange(val) {
      this.$emit('handleSelectionChange', val)
    },
    rowSelect(selection, row) {
      this.$emit('rowSelect', selection, row)
    },
    selectAll(val) {
      this.$emit('selectAll', val)
    },
    handleRowClick(row) {
      this.$emit('handleRowClick', row)
    },

    clearSelection() {
      this.$refs.sysDsConfTable.clearSelection()
    },
    toggleRowSelection(row) {
      this.$refs.sysDsConfTable.toggleRowSelection(row)
    },
    showAction(params) {
      const newArr = params.filter(item => {
        return item.ifShow && !item.ifShow()
      })
      if (params.length === newArr.length) {
        return false
      } else {
        return true
      }
    },
    getInputList() {
      return this.inputList
    },
    clearInputList() {
      this.inputList = {}
    }
  }
}
</script>
<style lang="less">
// .el-table--border.el-table--enable-row-transition {
//   border: 1px solid #d7d7d7;
// }

// // .el-table th.el-table__cell.is-leaf,
// // .el-table td.el-table__cell {
// //   border-bottom: 0.0625rem solid #f2f2f2;
// // }

// .el-button span {
//   font-size: 14px;
// }

// .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
//   background: #d7d7d7;
// }
.el-table th {
  height: 44px;
}
.el-table th > .cell {
  font-family: '微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑', sans-serif;
  font-weight: 700;
  font-style: normal;
  // font-size: 14px;
  color: #000000;
}
.color-red span {
  color: red;
}
:deep(.el-table .cell) {
  font-size: 16px;
}
:deep(.el-table th > .cell) {
  font-size: 18px;
}
:deep(.el-table .el-table__header-wrapper th) {
  font-size: 18px !important;
}
</style>
